<template>
  <a-modal
    title="修改"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="blackListEditVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户号"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 334px"
              :filter-option="filterOption"
              @focus="selectMchntNo"
              @search="selectMchntNo"
              @change="handleChange"
              @select="selected"
              v-decorator="['mchntNo',{rules: [{ required: true, message: '必填字段'}]}]"
              :disabled="this.isEdit"
            >
              <a-select-option v-for="(d,index) in suData" :key="index">
                {{ d.mchntNo }}-{{d.mchntName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="id"
                       v-bind="formItemLayout" style="display: none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户名称'
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntName',{rules: [{ required: true, message: '必填字段'}]}]"
                     :disabled="this.isEdit"/>
          </a-form-item>
          <a-form-item label="数据来源"
                       v-bind="formItemLayout" style="display: none">
            <a-input v-decorator="['dataSources']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户简称"
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntSimpleName']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户英文名称'
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntEnName']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户英文名称简写'
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntEnSimpleName']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='经营场所名称'
                       v-bind="formItemLayout">
            <a-input v-decorator="['premisesName']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户性质"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="this.isEdit"
              v-decorator="['mchntNature']">
              <a-select-option key="071">私营独资企业</a-select-option>
              <a-select-option key="072">私营合伙企业</a-select-option>
              <a-select-option key="051">国有独资公司</a-select-option>
              <a-select-option key=073">私营有限责任公司</a-select-option>
              <a-select-option key="030">股份合作企业</a-select-option>
              <a-select-option key="052">其他有限责任公司</a-select-option>
              <a-select-option key="074">私营股份有限公司</a-select-option>
              <a-select-option key="130">独资经营企业</a-select-option>
              <a-select-option key="010">国有企业</a-select-option>
              <a-select-option key="230">外资企业</a-select-option>
              <a-select-option key="110">合资经营企业</a-select-option>
              <a-select-option key="210">中外合资经营企业</a-select-option>
              <a-select-option key="310">政府机构</a-select-option>
              <a-select-option key="080">其他企业</a-select-option>
              <a-select-option key="060">股份有限公司</a-select-option>
              <a-select-option key="041">国有联营企业</a-select-option>
              <a-select-option key="140">投资股份有限公司</a-select-option>
              <a-select-option key="020">集体企业</a-select-option>
              <a-select-option key="042">集体联营企业</a-select-option>
              <a-select-option key="240">外商投资股份有限公司</a-select-option>
              <a-select-option key="043">国有与集体联营企业</a-select-option>
              <a-select-option key="120">合作经营企业</a-select-option>
              <a-select-option key="044">其他联营企业</a-select-option>
              <a-select-option key="220">中外合作经营企业</a-select-option>
              <a-select-option key="320">事业单位</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='法人代表'
                       v-bind="formItemLayout">
            <a-input v-decorator="['artifName']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="法人代表证件类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="this.isEdit"
              v-decorator="['artifCertType']">
              <a-select-option key="99">其它</a-select-option>
              <a-select-option key="01">身份证</a-select-option>
              <a-select-option key="02">军官证</a-select-option>
              <a-select-option key="03">护照</a-select-option>
              <a-select-option key="04">户口薄</a-select-option>
              <a-select-option key="05">士兵证</a-select-option>
              <a-select-option key="06">港澳来往内地通行证</a-select-option>
              <a-select-option key="07">台湾同胞来往内地通行证</a-select-option>
              <a-select-option key="08">临时身份证</a-select-option>
              <a-select-option key="09">外国人居留证</a-select-option>
              <a-select-option key="10">警官证</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='法人代表证件号'
                       v-bind="formItemLayout">
            <a-input v-decorator="['artifCertNo']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户证件类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="this.isEdit"
              v-decorator="['licenceType']"
            >
              <a-select-option key="00">营业执照</a-select-option>
              <a-select-option key="11">贷款卡号</a-select-option>
              <a-select-option key="99">其他</a-select-option>
              <a-select-option key="01">机构信用代码证</a-select-option>
              <a-select-option key="02">民办非企业登记证书</a-select-option>
              <a-select-option key="03">全国组织机构代码证</a-select-option>
              <a-select-option key="04">事业单位法人证书</a-select-option>
              <a-select-option key="05">境外企业证书</a-select-option>
              <a-select-option key="06">社会团体法人登记证书</a-select-option>
              <a-select-option key="07">工会法人资格证书</a-select-option>
              <a-select-option key="08">政府批文</a-select-option>
              <a-select-option key="09">预先核准通知书</a-select-option>
              <a-select-option key="10">其他批文或证明</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户证件号码'
                       v-bind="formItemLayout">
            <a-input v-decorator="['licenceCode']"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户注册期限"
                       v-bind="formItemLayout">
            <a-input v-decorator="['licenceExpireDate']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户注册资金(万元)'
                       v-bind="formItemLayout">
            <a-input v-decorator="['registerCapital']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户注册地址"
                       v-bind="formItemLayout">
            <a-input v-decorator="['registerAddr']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='联系人'
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactName']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="电话"
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactPhone']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='传真'
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactFax']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="手机"
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactMobile']" :disabled="this.isEdit"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='电子邮件'
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactEmail']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="邮编"
                       v-bind="formItemLayout">
            <a-input v-decorator="['postCode']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='通信地址'
                       v-bind="formItemLayout">
            <a-input v-decorator="['postalAddress']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="风险信息等级"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['riskGrade',{rules: [{ required: true, message: '必填字段'}]}]">
              <a-select-option key="01">一级</a-select-option>
              <a-select-option key="02">二级</a-select-option>
              <a-select-option key="03">三级</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="风险类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['riskType',{rules: [{ required: true, message: '必填字段'}]}]">
              <a-select-option key="11">移机</a-select-option>
              <a-select-option key="99">其他</a-select-option>
              <a-select-option key="01">虚假申请</a-select-option>
              <a-select-option key="12">高风险商户</a-select-option>
              <a-select-option key="02">套现、积分</a-select-option>
              <a-select-option key="13">商户合谋欺诈</a-select-option>
              <a-select-option key="03">违法经营</a-select-option>
              <a-select-option key="14">破产或停业商户</a-select-option>
              <a-select-option key="04">销赃</a-select-option>
              <a-select-option key="15">强迫签单</a-select-option>
              <a-select-option key="05">买卖或租借银行（支付）账户</a-select-option>
              <a-select-option key="06">侧录点</a-select-option>
              <a-select-option key="17">频繁变更服务机构</a-select-option>
              <a-select-option key="07">伪卡集中使用点</a-select-option>
              <a-select-option key="18">关联商户涉险</a-select-option>
              <a-select-option key="08">泄露账户及交易信息</a-select-option>
              <a-select-option key="19">买卖银行卡信息</a-select-option>
              <a-select-option key="09">恶意倒闭</a-select-option>
              <a-select-option key="20">拒刷信用卡</a-select-option>
              <a-select-option key="10">恶意分单</a-select-option>
              <a-select-option key="21">转嫁手续费</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="有效性"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['validStatus',{rules: [{ required: true, message: '必填字段'}]}]">
              <a-select-option key="01">有效</a-select-option>
              <a-select-option key="02">失效</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="有效期"
                       v-bind="formItemLayout">
            <a-date-picker
              placeholder="请选择日期"
              style="width: 334px"
              name="reconFileDate"
              v-decorator="['validDate',{rules: [{ required: true, message: '必填字段'}]}]"
              format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="加入黑名单原因"
                       v-bind="formItemLayout">
            <a-input v-decorator="['mchntBlacklistReason']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-item label="风险事件发生地域(省/市)"
                       :label-col="{span: 4}"
                       :wrapper-col="{span: 20}">
            <a-select
              show-search
              placeholder="省"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectProvince"
              v-decorator="['termAddrPrvnc',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="d in provinceData" :key="d.id">
                {{d.name}}
              </a-select-option>
            </a-select>-
            <a-select
              show-search
              placeholder="市"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectCity"
              v-decorator="['termAddrCity',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in cityData" :key="d.id">
                {{d.name}}
              </a-select-option>
            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'MchntBlackListEdit',
    props: {
      blackListEditVisiable: {
        default: false
      },
      instId: '',
    },
    data() {
      return {
        data: [],
        suData: [],
        provinceData: [],
        cityData: [],
        riskOccurAreaTemp: '',
        riskOccurArea: '',
        isEdit: false,
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        // firstValue: {},
        info: {
          infoName: '',
          remark: '',
          menuId: ''
        }
      }
    },
    computed: {
      show: {
        get: function () {
          return this.blackListEditVisiable
        },
        set: function () {
        }
      }
    },
    mounted() {

    },

    methods: {

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },

      getMoment(value) {
        return this.$moment(value).format('YYYY-MM-DD')
      },

      selectMchntNo(val) {
        this.suData = []
        let param = {}
        if (val) {
          param = {
            q: encodeURIComponent(val + `&${this.instId}`),
            pageSize: 20
          }
          if (val.length >= 5) {
            this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
              let result = r.data.rows
              result.forEach(r => {
                this.suData.push(r);
              })
            })
          }
        } else {
          param = {
            q: encodeURIComponent(`&${this.instId}`),
            pageSize: 20
          }
          this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
            let result = r.data.rows
            result.forEach(r => {
              this.suData.push(r);
            })
          })
        }
      },
      selected(val) {
        this.form.setFieldsValue({
          mchntNo: this.suData[val].mchntNo,
        })

        this.renderForm(val)
        this.isEdit = true
      },
      handleChange(value) {
        this.form.setFieldsValue({
          mchntName: this.suData[value].mchntName,
          mchntSimpleName: this.suData[value].mchntName
        })
      },

      renderForm(val) {
        let mchntNo = this.suData[val].mchntNo
        this.$get('admin/merParam/mchntBlackListInfo/initFormData', {
          instId: this.instId,
          mchntNo: mchntNo
        }).then((r) => {
          this.form.setFieldsValue({
            mchntNature: r.data.mchntNature,
            artifName: r.data.artifName,
            artifCertType: r.data.artifCertType,
            artifCertNo: r.data.artifCertNo,
            licenceType: r.data.licenceType,
            licenceExpireDate: r.data.licenceExpireDate,
            registerAddr: r.data.registerAddr,
            contactName: r.data.contactName,
            contactPhone: r.data.contactPhone,
            contactMobile: r.data.contactMobile,
          })
        })
      },

      selectProvince() {
        this.provinceData = []
        this.cityData = []
        this.form.setFieldsValue({
          termAddrPrvnc: '',
          termAddrCity: '',
        })
        let l = '01'
        this.$get('/admin/merParam/regionInfo/select2', {l: l}).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.provinceData.push(r);
          })
        })
      },
      selectCity() {
        this.cityData = []
        this.form.setFieldsValue({
          termAddrCity: '',
        })
        let termAddrPrvnc = this.form.getFieldsValue(['termAddrPrvnc'])
        if (termAddrPrvnc.termAddrPrvnc) {
          let l = '02'
          let p = termAddrPrvnc.termAddrPrvnc
          // this.provinceData.forEach((val, index) => {
          //   if (val.name == termAddrPrvnc.termAddrPrvnc) return p = val.id
          // })
          this.$get('/admin/merParam/regionInfo/select2', {l: l, p: p}).then((r) => {
            let result = r.data
            result.forEach(r => {
              this.cityData.push(r);
            })
          })
        }
      },

      reset() {
        this.loading = false
        this.isEdit = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setInfoFields()
            this.loading = true
            this.info.instId = this.instId
            this.info.optFlag = 'upd'
            this.info.riskOccurArea = this.info.termAddrPrvnc + '/' + this.info.termAddrCity
            if (this.info.riskOccurArea == this.riskOccurArea){
              this.info.riskOccurArea = this.riskOccurAreaTemp
            }
            this.info.validDate = this.getMoment(this.info.validDate)
            this.$put('/admin/merParam/mchntBlackListInfo', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })

      },

      setInfoFields() {
        let values = this.form.getFieldsValue(['id', 'mchntNo', 'mchntName', 'mchntSimpleName', 'mchntEnName',
          'mchntEnSimpleName', 'premisesName', 'mchntNature', 'artifName', 'artifCertType', 'artifCertNo', 'dataSources',
          'licenceType', 'licenceCode', 'licenceExpireDate', 'registerCapital', 'registerAddr', 'contactName',
          'contactPhone', 'contactFax', 'contactMobile', 'contactEmail', 'postCode', 'postalAddress', 'riskGrade',
          'riskType', 'validStatus', 'validDate', 'mchntBlacklistReason', 'termAddrPrvnc', 'termAddrCity'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.info[_key] = values[_key]
          })
        }
      },

      setMchntBlackListFormValues({...info}) {
        let fields = ['id', 'mchntNo', 'mchntName', 'mchntSimpleName', 'mchntEnName', 'mchntEnSimpleName',
          'premisesName', 'mchntNature', 'artifName', 'artifCertType', 'artifCertNo', 'licenceType', 'licenceCode',
          'licenceExpireDate', 'registerCapital', 'registerAddr', 'contactName', 'contactPhone', 'contactFax',
          'contactMobile', 'contactEmail', 'postCode', 'postalAddress', 'riskGrade', 'riskType', 'validStatus',
          'validDate', 'mchntBlacklistReason', 'termAddrPrvnc', 'termAddrCity', 'dataSources', 'riskOccurArea']
        this.riskOccurAreaTemp = info.riskOccurArea
        this.riskOccurArea = info.termAddrPrvnc + '/' + info.termAddrCity
        Object.keys(info).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = info[key]
            this.form.setFieldsValue(obj)
          }
        })
      },


    },

  }
</script>


